<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>表格合并</title>
	<link rel="stylesheet" href="css/base.css" type="text/css" />
</head>
<body>

<div class="c-main ptb20">
    <h3 class="mt30 mb10">内容自动合并:</h3>
    <table id="process-demo-1" class="tb tb-b c-100 c-t-center">
        <thead>
        <tr>
            <th>col0</th>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>SuZhou</td>
            <td>11111</td>
            <td>11111</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>33333</td>
            <td>44444</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>55555</td>
            <td>66666</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>77777</td>
            <td>88888</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>uuuuu</td>
            <td>hhhhh</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>ggggg</td>
            <td>ccccc</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ttttt</td>
            <td>eeeee</td>
            <td>GuangZhouCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ppppp</td>
            <td>qqqqq</td>
            <td>GuangZhouCity</td>
        </tr>
        </tbody>
    </table>



    <h3 class="mt30 mb10">指定单列合并:</h3>
    <table id="process-demo-2" class="tb tb-b c-100 c-t-center">
        <thead>
        <tr>
            <th>col0</th>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>SuZhou</td>
            <td>11111</td>
            <td>22222</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>33333</td>
            <td>44444</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>55555</td>
            <td>66666</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>77777</td>
            <td>88888</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>uuuuu</td>
            <td>hhhhh</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>ggggg</td>
            <td>ccccc</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ttttt</td>
            <td>eeeee</td>
            <td>GuangZhouCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ppppp</td>
            <td>qqqqq</td>
            <td>GuangZhouCity</td>
        </tr>
        </tbody>
    </table>


    <h3 class="mt30 mb10">指定多列合并:</h3>
    <table id="process-demo-3" class="tb tb-b c-100 c-t-center">
        <thead>
        <tr>
            <th>col0</th>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>SuZhou</td>
            <td>11111</td>
            <td>22222</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>33333</td>
            <td>44444</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>SuZhou</td>
            <td>55555</td>
            <td>66666</td>
            <td>SuZhouCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>77777</td>
            <td>88888</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>uuuuu</td>
            <td>hhhhh</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>ShangHai</td>
            <td>ggggg</td>
            <td>ccccc</td>
            <td>ShangHaiCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ttttt</td>
            <td>eeeee</td>
            <td>GuangZhouCity</td>
        </tr>
        <tr>
            <td>GuangZhou</td>
            <td>ppppp</td>
            <td>qqqqq</td>
            <td>GuangZhouCity</td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tablesMergeCell.js"></script>

<script type="text/javascript">
    $(function(){
        $('#process-demo-1').tablesMergeCell({
            cols: [0,3]
        });

        $('#process-demo-2').tablesMergeCell({
            automatic: false,
            cols: [0],
            rows: [0,1,2]
        });

        $('#process-demo-3').tablesMergeCell({
            automatic: false,
            cols: [0,3],
            rows: [[3,4,5],[6,7]]
        });
    });
</script>
</body>
</html>